import 'package:flutter/material.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/widgets/appbar/common_app_bar.dart';
import 'package:flutter_base/widgets/button/common_button.dart';
import 'package:flutter_base/widgets/button/debounce_gesture_detector.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'wallet_logic.dart';

class WalletPage extends StatelessWidget {
  final logic = Get.put(WalletLogic());

  WalletPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<WalletLogic>(

      appBar: CommonAppBar(
        title: 'Wallet',
        showLeft: true,
      ),
      backgroundColor: const Color(0xFFF8F9FA),
      builder: (controller) {
        return SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 16.w),
                // 当前余额卡片
                _buildBalanceCard(),
                
                SizedBox(height: 24.w),
                
                // 充值金额选择
                _buildRechargeAmountSection(),
                
                SizedBox(height: 24.w),
                
                // 支付方式选择
                _buildPaymentMethodSection(),
                
                SizedBox(height: 32.w),
                
                // 充值按钮
                _buildRechargeButton(),
                
                SizedBox(height: 40.w),
              ],
            ),
          ),
        );
      },
    );
  }

  // 余额卡片
  Widget _buildBalanceCard() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF2196F3), Color(0xFF40C4FF)],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        borderRadius: BorderRadius.circular(16.w),
      ),
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 24.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 左侧余额信息
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Current Balance',
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(height: 8.w),
              Row(
                children: [
                  // 硬币图标
                  Container(
                    width: 24.w,
                    height: 24.w,
                    decoration: const BoxDecoration(
                      color: Color(0xFFFFB300),
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: Text(
                        'C',
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 8.w),
                  // 余额
                  Obx(() => Text(
                    logic.balance.value.toString(),
                    style: TextStyle(
                      fontSize: 24.sp,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  )),
                ],
              ),
            ],
          ),
          
          // 右侧详情按钮
          DebounceGestureDetector(
            onTap: logic.goCoinDetails,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.w),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.2),
                borderRadius: BorderRadius.circular(16.w),
              ),
              child: Row(
                children: [
                  Text(
                    'Coin Details',
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(width: 4.w),
                  Icon(
                    Icons.arrow_forward,
                    size: 12.w,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 充值金额选择区域
  Widget _buildRechargeAmountSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Recharge Amount',
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 16.w),
        
        // 充值选项网格
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.1,
            crossAxisSpacing: 12.w,
            mainAxisSpacing: 12.w,
          ),
          itemCount: logic.rechargeOptions.length,
          itemBuilder: (context, index) {
            final option = logic.rechargeOptions[index];
            return _buildRechargeOption(option);
          },
        ),
      ],
    );
  }

  // 单个充值选项卡片
  Widget _buildRechargeOption(RechargeOption option) {
    return Obx(() {
      final isSelected = logic.selectedAmount.value == option.coins;
      
      return DebounceGestureDetector(
        onTap: () => logic.selectAmount(option.coins),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.w),
            border: Border.all(
              color: isSelected ? AppColor.primary : Colors.transparent,
              width: 2.w,
            ),
            boxShadow: [
              if (isSelected)
                BoxShadow(
                  color: AppColor.primary.withOpacity(0.2),
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
            ],
          ),
          padding: EdgeInsets.all(12.w),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 特殊标签
              if (option.isFirstCharge || option.isLimitedTime)
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.w),
                  decoration: BoxDecoration(
                    color: option.isFirstCharge 
                        ? const Color(0xFFE040FB) 
                        : const Color(0xFFFF9800),
                    borderRadius: BorderRadius.circular(10.w),
                  ),
                  child: Text(
                    option.isFirstCharge ? 'First Charge' : 'Limited Time',
                    style: TextStyle(
                      fontSize: 8.sp,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              
              SizedBox(height: 8.w),
              
              // 硬币数量
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 20.w,
                    height: 20.w,
                    decoration: const BoxDecoration(
                      color: Color(0xFFFFB300),
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: Text(
                        'C',
                        style: TextStyle(
                          fontSize: 10.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 4.w),
                  Text(
                    option.coins.toString(),
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
              
              SizedBox(height: 4.w),
              
              // 价格
              Text(
                '\$${option.price}',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: Colors.grey[600],
                ),
              ),
            ],
          ),
        ),
      );
    });
  }

  // 支付方式选择区域
  Widget _buildPaymentMethodSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Recharge Method',
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 16.w),
        
        // 支付方式列表
        Column(
          children: logic.paymentMethods.map((method) => 
            _buildPaymentMethodItem(method)
          ).toList(),
        ),
      ],
    );
  }

  // 单个支付方式选项
  Widget _buildPaymentMethodItem(PaymentMethod method) {
    return Obx(() {
      final isSelected = logic.selectedPaymentMethod.value == method.id;
      
      return DebounceGestureDetector(
        onTap: () => logic.selectPaymentMethod(method.id),
        child: Container(
          margin: EdgeInsets.only(bottom: 12.w),
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.w),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.w),
            border: Border.all(
              color: isSelected ? AppColor.primary : Colors.transparent,
              width: isSelected ? 1.w : 0,
            ),
          ),
          child: Row(
            children: [
              // 支付方式图标
              _buildPaymentIcon(method.icon),
              
              SizedBox(width: 12.w),
              
              // 支付方式名称
              Text(
                method.name,
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              
              const Spacer(),
              
              // 选择标记
              Container(
                width: 24.w,
                height: 24.w,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: isSelected ? AppColor.primary : Colors.grey[200],
                  border: isSelected 
                      ? null 
                      : Border.all(color: Colors.grey[400]!, width: 1.w),
                ),
                child: isSelected 
                    ? const Icon(Icons.check, color: Colors.white, size: 16)
                    : null,
              ),
            ],
          ),
        ),
      );
    });
  }

  // 支付方式图标
  Widget _buildPaymentIcon(String iconName) {
    IconData iconData;
    Color backgroundColor;
    Color iconColor;
    
    switch (iconName) {
      case 'mastercard':
        iconData = Icons.credit_card;
        backgroundColor = const Color(0xFFFF5252);
        iconColor = Colors.white;
        break;
      case 'paypal':
        iconData = Icons.payment;
        backgroundColor = const Color(0xFF4A90E2);
        iconColor = Colors.white;
        break;
      case 'wise':
        iconData = Icons.account_balance;
        backgroundColor = const Color(0xFF4CD964);
        iconColor = Colors.white;
        break;
      default:
        iconData = Icons.credit_card;
        backgroundColor = Colors.grey;
        iconColor = Colors.white;
    }
    
    return Container(
      width: 40.w,
      height: 40.w,
      decoration: BoxDecoration(
        color: backgroundColor,
        shape: BoxShape.circle,
      ),
      child: Icon(
        iconData,
        color: iconColor,
        size: 20.w,
      ),
    );
  }

  // 充值按钮
  Widget _buildRechargeButton() {
    return Obx(() {
      final isButtonEnabled = logic.selectedAmount.value > 0;
      
      return Container(
        width: double.infinity,
        height: 52.w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(26.w),
          gradient: isButtonEnabled
              ? const LinearGradient(
                  colors: [Color(0xFF00BCD4), Color(0xFF40C4FF)],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                )
              : null,
          color: isButtonEnabled ? null : Colors.grey[300],
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: isButtonEnabled ? logic.doRecharge : null,
            borderRadius: BorderRadius.circular(26.w),
            child: Center(
              child: Text(
                'Recharge',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      );
    });
  }
} 